<template>
  <view class="tabbar-placeholder">
    <view class="placeholder"></view>

    <view class="custom-tabbar">
      <view 
        class="tab-item" 
        v-for="(item, index) in list" 
        :key="index"
        :class="{ active: current === index }"
        @click="switchTab(item, index)"
      >
        <view class="tab-icon-box">
          <text class="tab-icon">{{ item.iconText }}</text>
        </view>
        <text class="tab-label">{{ item.text }}</text>
      </view>

      <view class="tab-divider"></view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "LoneTrailTabBar",
    props: {
      // 当前选中的索引：0 代表首页，1 代表个人中心
      current: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        list: [
          {
            pagePath: "/pages/home/home", // 请确保这里是你的首页路径
            iconText: "HOME",
            text: "首页"
          },
          {
            pagePath: "/pages/personinformation/personinformation", // 请确保这里是你的个人中心路径
            iconText: "USER",
            text: "个人中心"
          }
        ]
      };
    },
    methods: {
      switchTab(item, index) {
        if (this.current === index) return;

        // 震动反馈，增加机械感
        uni.vibrateShort();

        // 跳转到 Tab 页面
        uni.switchTab({
          url: item.pagePath,
          fail: (err) => {
            console.error("SwitchTab failed: ", err);
            // 如果不是 tab 页面，尝试普通跳转（兜底）
            uni.redirectTo({ url: item.pagePath });
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 变量定义 */
  $c-green: #79BBA9;
  
  /* 占位高度，与 TabBar 高度一致，外加底部安全区 */
  .placeholder {
    width: 100%;
    height: 160rpx; /* 根据实际高度调整 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .custom-tabbar {
    position: fixed;
    bottom: 40rpx;
    left: 40rpx;
    right: 40rpx;
    height: 120rpx;
    background: rgba(20, 20, 20, 0.95); /* 深色科技底 */
    backdrop-filter: blur(10px);
    z-index: 999;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* 孤星风格切角 */
    clip-path: polygon(30rpx 0, 100% 0, 100% calc(100% - 30rpx), calc(100% - 30rpx) 100%, 0 100%, 0 30rpx);
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.4);
    
    /* 适配底部安全区，防止 iPhone 下方横条遮挡，适当上移 */
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }

  .tab-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666; /* 未选中颜色 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .tab-item:active {
    background: rgba(255, 255, 255, 0.05);
  }

  /* 选中状态 */
  .tab-item.active {
    color: $c-green;
    text-shadow: 0 0 10rpx rgba(121, 187, 169, 0.3);
  }

  .tab-item.active .tab-icon-box {
    border-color: $c-green;
    background: rgba(121, 187, 169, 0.1);
    transform: translateY(-2rpx);
  }

  .tab-icon-box {
    padding: 6rpx 16rpx;
    border: 2rpx solid transparent;
    margin-bottom: 8rpx;
    border-radius: 4rpx;
    transition: all 0.3s;
  }

  .tab-icon {
    font-size: 28rpx;
    font-weight: 900;
    letter-spacing: 2rpx;
    font-family: 'Helvetica Neue', Helvetica, sans-serif; /* 尽量用无衬线字体 */
  }

  .tab-label {
    font-size: 20rpx;
    font-weight: bold;
  }

  /* 中间装饰线 */
  .tab-divider {
    position: absolute;
    left: 50%;
    top: 25%;
    bottom: 25%;
    width: 2rpx;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
  }
</style>